<template>
    <div class="reqTabs">
        <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane name="Header">
                <div slot="label" class="TabsTitle">
                    Header
                    <el-tooltip @click.native.stop :popper-class="theme" effect="dark" placement="bottom">
                        <div slot="content">请求头部</div>
                        <i style="font-size: 12px;" class="el-icon-warning-outline"></i>
                    </el-tooltip>
                </div>
                <div class="requesterBox" :class="{'ani' : !moveActive}" :style="{'height': height + 'px'}">
                    <headerBox ref="Header" :ChangeValue="ChangeValue" :header="newValue.header" :height="height">
                    </headerBox>
                </div>
            </el-tab-pane>
            <el-tab-pane name="Body">
                <div slot="label" class="TabsTitle">
                    Body
                    <el-tooltip effect="dark" :popper-class="theme" @click.native.stop placement="bottom">
                        <div slot="content">请求主体<br>GET 模式下会将Body会被忽略<br>请使用Query参数</div>
                        <i style="font-size: 12px;" class="el-icon-warning-outline"></i>
                    </el-tooltip>
                </div>
                <div class="requesterBox" :class="{'ani' : !moveActive}" :style="{'height': height + 'px'}">
                    <bodyBox ref="Body" :ChangeValue="ChangeValue" :bodyType="newValue.bodyType" :body="newValue.body"
                        :fromdataValue="newValue.fromdata" :height="height"></bodyBox>
                </div>
            </el-tab-pane>
            <el-tab-pane name="Query">
                <div slot="label" class="TabsTitle">
                    Query
                    <el-tooltip effect="dark" :popper-class="theme" @click.native.stop placement="bottom">
                        <div slot="content">Query 参数是指地址栏中 ? 后面的参数 <br> 例如 /login?username=DevSpeed</div>
                        <i style="font-size: 12px;" class="el-icon-warning-outline"></i>
                    </el-tooltip>
                </div>
                <div class="requesterBox" :class="{'ani' : !moveActive}" :style="{'height': height + 'px'}">
                    <queryBox ref="Query" :ChangeValue="ChangeValue" :query="newValue.query" :height="height">
                    </queryBox>
                </div>
            </el-tab-pane>
            <el-tab-pane name="Rest">
                <div slot="label" class="TabsTitle">
                    Rest
                    <el-tooltip effect="dark" :popper-class="theme" @click.native.stop placement="bottom">
                        <div slot="content">
                            Rest 参数是指地址栏中 / 分割的参数
                            <br> 例如 /login/{username}
                            <br> 或 /login/:username
                        </div>
                        <i style="font-size: 12px;" class="el-icon-warning-outline"></i>
                    </el-tooltip>
                </div>
                <div class="requesterBox" :class="{'ani' : !moveActive}" :style="{'height': height + 'px'}">
                    <restBox ref="Rest" :ChangeValue="ChangeValue" :url="newValue.url" :rest="newValue.rest"
                        :height="height"></restBox>
                </div>
            </el-tab-pane>
            <el-tab-pane name="request">
                <div slot="label" class="TabsTitle">
                    预处理
                    <el-tooltip effect="dark" :popper-class="theme" @click.native.stop placement="bottom">
                        <div slot="content">编写 javascript 代码，以处理响应数据<br>可在API响应后对API数据显示进行处理 或 将返回数据值存入全局变量等复杂操作</div>
                        <i style="font-size: 12px;" class="el-icon-warning-outline"></i>
                    </el-tooltip>
                </div>
                <div class="requesterBox" :class="{'ani' : !moveActive}" :style="{'height': height + 'px'}">
                    <beforehand ref="request" :ChangeValue="ChangeValue" :before="newValue.before"
                        :after="newValue.after" :height="height"></beforehand>
                </div>
            </el-tab-pane>
            <div class="moveBar_content" @mousedown="mousedown($event)"></div>
        </el-tabs>
        <div class="switch" @click="switchBox">
            <i class="el-icon-arrow-up" :style="{'transform': height ? 'rotateZ(0deg)':'rotateZ(180deg)'}"></i>
        </div>
    </div>
</template>
<script>
    import headerBox from './reqOption/header';
    import bodyBox from './reqOption/body'
    import queryBox from './reqOption/query'
    import restBox from './reqOption/rest'
    import beforehand from './reqOption/beforehand'


    import { mapState } from 'vuex';

    export default {
        props: ['checkChangeValue', 'newValue'],
        components: {
            headerBox,
            bodyBox,
            queryBox,
            restBox,
            beforehand
        },
        data() {
            return {
                height: 300,
                startClientY: 0,
                activeName: 'Header',
                moveActive: false,
            }
        },
        computed: {
            ...mapState("theme", {
                theme: state => state.theme,
            }),
        },
        methods: {
            ChangeValue(key, value) {
                this.newValue[key] = value;
                this.checkChangeValue();
            },
            tagEvent() { },
            handleClick(tab, event) {
                if (this.height < 100) {
                    this.height = 300
                };
                this.$nextTick(() => {
                    this.$refs[tab.name].refreshEditor();
                });
            },
            switchBox() {
                if (this.height != 0) {
                    this.height = 0;
                } else {
                    this.height = 300;
                }
            },
            mousedown(event) {
                document.body.style.cursor = 'row-resize';
                this.startClientY = event.clientY;
                let Height = this.height;
                this.moveActive = true;
                document.onmousemove = (event) => {
                    let top = event.clientY;
                    this.height = top - this.startClientY + Height;
                    if (this.height < 0) {
                        this.height = 0;
                    };
                };
                document.onmouseup = () => {
                    this.moveActive = false;
                    this.startClientY = 0;
                    document.body.style.cursor = '';
                    document.onmousemove = null;
                    document.onmouseup = null;
                }
            },
        },

    }

</script>

<style>
    .reqTabs .el-tabs__nav-wrap {
        margin-right: 40px;
    }
</style>

<style scope>
    .reqTabs {
        margin: 0 20px;
        position: relative;
    }

    .TabsTitle {
        font-size: 18px;
        /* margin: 0 5px; */
    }

    .moveBar_content {
        height: 5px;
        margin: 10px 0;
    }

    .moveBar_content:hover {
        cursor: row-resize;
        background: #E4E7ED;
    }

    .moveBar_content:active {
        background: #E4E7ED;
    }

    .requesterBox {
        overflow: hidden;
        border: 1px solid #E4E7ED;
        border-top: none;
        border-radius: 0 0 4px 4px;
        /* transition: height 0.3s; */
    }

    .requesterBox.ani {
        transition: height 0.3s;
    }

    .switch {
        position: absolute;
        top: 0px;
        right: 0px;
        width: 40px;
        height: 38px;
        line-height: 38px;
        text-align: center;
        border-bottom: 2px solid #E4E7ED;

    }

    .switch i {
        transition: transform 0.3s;
    }
</style>